<template>
  <div class="evaluate">
     <el-breadcrumb separator="/">
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>酒店评价管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="evaluate-content">
      <!-- 搜索区域 -->
      <div class="seach-box">
        <el-form label-width="90px">
          <el-form-item label="酒店："
            style="margin-bottom:0;">
            <p>{{hotelName}}</p>
          </el-form-item>
          <div class="box box-1">
            <el-form-item label="全部日期">
              <el-date-picker v-model="start_end_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="padding: 0 10px;height:34px;"
                value-format="yyyy-MM-dd"
                :editable="false"
                @change="setTime">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="入住类型">
              <el-select v-model="typeId"
                @change="getList">
                <el-option v-for="item in checkType"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="房型">
              <el-select v-model="saleRoomId"
                @change="getList">
                <el-option value=""
                  label="全部"></el-option>
                <el-option v-for="item in roomTypeList"
                  :key="item.saleRoomId"
                  :value="item.saleRoomId"
                  :label="item.saleRoom"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="类型筛选">
            <el-row>
              <el-button size="small"
                v-for="(item,index) in tagCountList"
                :key="item.tagId"
                @click.native="handleTab(index,item.tagId)"
                :type="index == typeIndex ? 'primary': 'defalut'"
                v-model="tagId">{{item.tag}}（{{item.tagCount}}）</el-button>
            </el-row>
          </el-form-item>
        </el-form>

      </div>
      <div class="evaluate-list">
        <div class="empty"
          v-if="!evaluateContentList.length">暂无评论数据</div>
        <ul class="list-wrap">
          <li class="list-content"
            v-for="item in evaluateContentList"
            :key="item.id">
            <div class="user-info clearfix">
              <img :src="item.userPhoto"
                alt=""
                width="40"
                height="40"
                v-if="item.userPhoto">
              <div class="defaut-avatar"
                v-if="!item.userPhoto">
                <span>{{setDefautAvatar(item.userName)}}</span>
              </div>
              <span class="username">{{item.userName}}</span>
            </div>
            <div class="type">
              <span class="typeName">入住类型：
                <span v-for="typeItem in item.checkTypes"
                  :key="typeItem.id">{{typeItem.checkType}}&nbsp;&nbsp;</span>
              </span>
              <span class="typeinfo">
                <span class="checkin-time">入住时间：{{item.startTime}}</span>
                <span class="saleType">售卖房型：{{item.roomType}}</span>
              </span>
            </div>
            <div class="clearfix"
              style="padding-top:15px">
              <span class="star-name fl">综合&nbsp;</span>
              <el-rate v-model="item.star "
                disabled
                show-score
                text-color="#ff9900"
                class="fl"
                score-template="{value}"
                :colors="['#6d2377 ', '#6d2377 ', '#6d2377 ']">
              </el-rate>
            </div>
            <div class="evaluate-star">
              <span class="star-box">
                <span class="star-name">位置</span>
                <el-rate v-model="item.siteStar "
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="start-count"
                  score-template="{value}"
                  :colors="['#6d2377 ', '#6d2377 ', '#6d2377 ']">
                </el-rate>
              </span>
              <span class="star-box">
                <span class="star-name">服务</span>
                <el-rate v-model="item.serviceStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="start-count"
                  score-template="{value}"
                  :colors="['#6d2377 ', '#6d2377 ', '#6d2377 ']">
                </el-rate>
              </span>
              <span class="star-box">
                <span class="star-name">设施星级</span>
                <el-rate v-model="item.serviceStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="start-count"
                  score-template="{value}"
                  :colors="['#6d2377 ', '#6d2377 ', '#6d2377 ']">
                </el-rate>
              </span>
              <span class="star-box">
                <span class="star-name">卫生</span>
                <el-rate v-model="item.healthStar "
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="start-count"
                  score-template="{value}"
                  :colors="['#6d2377 ', '#6d2377 ', '#6d2377 ']">
                </el-rate>
              </span>
            </div>
            <div class="evaluate-txt">
              <p>
                {{item.content}}
              </p>
              <div class="fb-time">
                <i class="iconfont icon-phone"></i> 发表于: {{item.createTime}}</div>
            </div>
            <div class="images">
              <div class="image-wrap clearfix">
                <div class="image-list"
                  v-for="(photo,index) in item.photos"
                  :key="index">
                  <img :src="photo"
                    @click="viewImg(photo)" />
                </div>
              </div>
            </div>
            <el-button type="text"
              v-if="!item.reply"
              @click.native="reply(item)" v-has="'evaluatereply'">回复</el-button>
            <div class="reply"
              v-if="item.reply">
              <p class="reply-content">
                商家回复：{{item.reply}}
              </p>
            </div>
          </li>

        </ul>
        <p class="add-more"
          :class="{noMore:!isMore}"
          v-if="evaluateContentList.length"
          @click="addMore">{{addMoreInfo}}</p>
      </div>
    </div>
    <!-- 浏览大图 -->
    <el-dialog :visible.sync="dialogViewImg"
      width="20%"
      title="">
      <img :src="imgSrc"
        alt=""
        width="100%"
        style="margin:0 auto;display:block">
    </el-dialog>
    <!-- 评论输入弹窗 -->
    <el-dialog title="评论回复"
      :visible.sync="dialogVisible"
      width="30%">
      <el-input type="textarea"
        :autosize="{ minRows: 6, maxRows: 4}"
        placeholder="请输入评论回复内容"
        ref="textarea"
        v-model="replyConent"
        maxlength="100">
      </el-input>
      <p class="count">{{counts}}/100</p>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button @click="_submit"
          type="primary">提交</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import { condition, evaluateList, getTag, reply } from "@/public/js/evaluate";
export default {
  data() {
    return {
      start_end_time: [],
      typeIndex: 0,
      tagCountList: [],
      totalCount: "4.8",
      dialogViewImg: false,
      imgSrc: "",
      star_list: [
        {
          name: "位置",
          count: 3.6
        },
        {
          name: "服务",
          count: 4.5
        },
        {
          name: "设施",
          count: 3.6
        },
        {
          name: "卫生",
          count: 4.0
        }
      ],
      countInfo: "",
      /**
       * 
       * siteStar (integer, optional): 位置星级 ,
          serviceStar (integer, optional): 服务星级 ,
          facilityStar (integer, optional): 设施星级 ,
          healthStar (integer, optional): 卫生星级 ,
       */
      checkTypeId: "",
      // 1：情侣，2：朋友，3：亲子，4：出差，5：独自，6：其他

      checkType: [
        {
          name: "全部",
          id: ""
        },
        {
          name: "情侣",
          id: "1"
        },
        {
          name: "朋友",
          id: "2"
        },
        {
          name: "亲子",
          id: "3"
        },
        {
          name: "出差",
          id: "4"
        },
        {
          name: "独自",
          id: "5"
        },
        {
          name: "其他",
          id: "6"
        }
      ],
      hotelName: "",
      roomTypeList: [],
      saleRoomId: "",
      evaluateContentList: [],
      pageNo: 1,
      pageSize: 10,
      tagId: "",
      typeId: "",
      saleRoomId: "",
      inTime: "",
      outTime: "",
      total: "",
      addMoreInfo: "点击加载更多",
      isMore: true,
      dialogVisible: false,
      replyobj: null,
      replyConent: "",
      counts:0
    };
  },
  created() {
    this._condition();
    this._evaluateList();
  },
  mounted() {},
  methods: {
    //回复评论
    reply(item) {
      console.log(item);
      this.replyConent = "";
      this.dialogVisible = true;
      this.replyobj = item;
      setTimeout(() => {
        this.$refs["textarea"].focus();
      }, 10);
    },
    //回复评论输入弹窗提交
    _submit() {
      if (!this.replyConent) {
        this.$message.error("请输入评论内容");
        return false;
      }
      reply({
        id: this.replyobj.id,
        content: this.replyConent
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "提交成功"
          });
          this.replyobj.reply = this.replyConent;
          this.dialogVisible = false;
        }
      });
    },

    handleTab(index, tagId) {
      this.pageNo = 1;
      this.tagId = tagId;
      this.typeIndex = index;

      this._evaluateList();
    },
    // 查看大图
    viewImg(imgSrc) {
      this.dialogViewImg = true;
      this.imgSrc = imgSrc;
    },
    // 获取tag
    _getTag() {
      getTag({
        typeId: this.typeId,
        saleRoomId: this.saleRoomId,
        inTime: this.inTime,
        outTime: this.outTime
      }).then(res => {
        if (!res.data.errCode) {
          console.log(res);
          this.tagCountList = res.data.tagCountList;
        }
      });
    },
    // 获取查询条件
    _condition() {
      condition().then(res => {
        if (!res.data.errCode) {
          this.hotelName = res.data.hotelName;
          this.roomTypeList = res.data.roomTypeList;
        }
      });
    },
    getList() {
      this.pageNo = 1;
      this._evaluateList();
    },
    setTime(val) {
      if (val) {
        //(this.inTime = val[0]), (this.outTime = val[1]), this._evaluateList();
        this.pageNo = 1;
        this.inTime = val[0];
        this.outTime = val[1];
      } else {
        this.inTime = "";
        this.outTime = "";
      }
      this._evaluateList();
    },
    _evaluateList() {
      evaluateList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        tagId: this.tagId,
        typeId: this.typeId,
        saleRoomId: this.saleRoomId,
        inTime: this.inTime,
        outTime: this.outTime
      }).then(res => {
        if (!res.data.errCode) {
          this.evaluateContentList = res.data.evaluateContentList;
          this.total = res.data.total;
          this._getTag();
        }
      });
    },
    // 加载更多
    addMore() {
      if (this.evaluateContentList.length == this.total) {
        return false;
      } else {
        this.pageNo++;
        evaluateList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tagId: this.tagId,
          typeId: this.typeId,
          saleRoomId: this.saleRoomId,
          inTime: this.inTime,
          outTime: this.outTime
        }).then(res => {
          console.log(res);
          if (!res.data.errCode) {
            this.evaluateContentList.push(...res.data.evaluateContentList);
            this.total = res.data.total;
          }
        });
      }
    },
    // 设置默认头像
    setDefautAvatar(name) {
      return name.split("")[0];
    }
  },
  watch: {
    evaluateContentList: {
      handler(val) {
        if (val.length == this.total) {
          this.addMoreInfo = "没有更多了";
          this.isMore = false;
        } else {
          this.addMoreInfo = "点击加载更多";
          this.isMore = true;
        }
      },
      deep: true
    },
    replyConent(newValue){
     
      this.counts = newValue.length
    }
  }
};
</script>
<style lang="scss" scoped>
.evaluate {
  .evaluate-content {
    padding-top: 15px;
    .seach-box {
      border-bottom: 1px solid #cdd9e6;
      padding-bottom: 5px;
      .el-form-item {
        margin-bottom: 15px;
      }
      .el-date-editor--daterange {
        width: 100%;
      }
      .box {
        display: inline-block;
        &.box-1 {
          width: 360px;
        }
      }
    }
    .evaluate-list {
      width: 800px;
      padding: 20px 30px;
      .empty {
        text-align: center;
        padding-top: 50px;
      }
      .list-content {
        margin-bottom: 25px;
        border-bottom: 1px solid #cdd9e6;
        &:last-child {
          border-bottom: none;
        }
        .user-info {
          .defaut-avatar {
            float: left;
            span {
              display: inline-block;
              width: 40px;
              height: 40px;
              text-align: center;
              line-height: 40px;
              color: #fff;
              background: #6d2377;
              border-radius: 50%;
            }
          }
          & > img {
            border-radius: 50%;
            float: left;
          }
          .username {
            float: left;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
          }
        }
        .type {
          padding-top: 15px;
          .typeName {
            padding-right: 20px;
          }
          .typeinfo {
            .checkin-time {
              padding-right: 20px;
            }
          }
        }
        .evaluate-star {
          display: flex;
          align-items: center;
          padding-top: 10px;
          .star-box {
            margin-right: 30px;
            .star-name {
              display: inline-block;
              line-height: 18px;
              height: 18px;
            }
            .start-count {
              display: inline-block;
            }
          }
        }
        .evaluate-txt {
          padding-top: 10px;
          .fb-time {
            padding-top: 10px;
            color: #999;
            font-size: 12px;
          }
        }
        .images {
          margin-top: 20px;
          .image-wrap {
            .image-list {
              overflow: hidden;
              width: 100px;
              height: 100px;
              float: left;
              margin-bottom: 15px;
              margin-right: 10px;
              border: 1px solid #ddd;
              & > img {
                width: 100%;
                vertical-align: top;
              }
            }
          }
        }
        .reply {
          margin-bottom: 10px;
          background: #f2f2f2;
          .reply-content {
            padding: 5px 0px 20px 8px;
          }
        }
      }
    }
    .add-more {
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      height: 30px;
      line-height: 30px;
      color: #999;
      background: #eee;
      &.noMore {
        cursor: text;
      }
    }
  }
  .count {
    float: right;
    font-size:12px;
  }
}
</style>
